<!--
 * @Autor: Ruohong Yu
 * @Date: 2021-11-27 16:40:05
 * @LastEditors: Haiting Zhao
 * @LastEditTime: 2021-12-19 13:09:59
 * @Description: 权限管理
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\views\systemmanage\Permission.vue
-->

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:10px">
      <el-breadcrumb-item :to="{ name:'WorkPlace' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>查看权限</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <el-row :gutter="10">
      <el-col :span="2" />
      <el-col :span="8">
        <el-tree
          :data="permissionList"
          :props="defaultProps"
          default-expand-all
          @node-click="handleNodeClick"
        />
      </el-col>
      <el-col :span="13"> -->
    <el-row v-for="(item,i) in permissionList" :key="item.permissionId" style="margin: 0 200px;" :gutter="10" :class="['bdbottom', i==0 ? 'bdtop' : '', 'vcenter']">
      <el-col :span="7" style="text-align: center;">
        <el-tag>{{ item.permissionName }}</el-tag>
        <i class="el-icon-caret-right" />
      </el-col>
      <el-col :span="17">
        <el-row v-for="item2 in item.sonPermissions" :key="item2.permissionId" style="text-align: left;" class="vcenter">
          <el-col :span="8">
            <el-tag type="success">{{ item2.permissionName }}</el-tag>
            <i class="el-icon-caret-right" />
          </el-col>
          <el-row v-for="item3 in item2.sonPermissions" :key="item3.permissionId" style="text-align: center;">
            <el-col :span="16">
              <el-tag type="warning">{{ item3.permissionName }}</el-tag>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
    <!-- </el-col>
    </el-row> -->
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: 'Permission',
  data() {
    return {
      permissionList: [],
      defaultProps: {
        children: 'sonPermissions',
        label: 'permissionName'
      }
    }
  },
  mounted() {
    this.getpermissionList()
    // this.gettest()
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data)
    },

    /**
     * @description: 获取权限树
     * @param {*}
     * @return {*}
     * @author: Ruohong Yu
     */
    getpermissionList() {
      axios.get('/rolePer/allPermission')
        .then(res => {
          // console.log('allPermission.res', res)
          this.permissionList = res.data.data
          // console.log('this.permissionList', this.permissionList)
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
  .el-tree{
    margin-left: 120px;
    margin-right: 20px;
  }
  .el-tag {
    margin: 7px;
  }
  .bdtop {
    border-top: 1px solid #eee;
  }
  .bdbottom {
    border-bottom: 1px solid #eee;
  }
  .vcenter {
    display: flex;
    align-items: center;
  }
</style>
